<!-- src/components/common/Header.vue -->
<template>
    <header class="header">
      <div class="logo">小红书</div>
      <input type="text" placeholder="搜索内容" @input="handleSearch" />
      <div class="user-info" v-if="isLoggedIn" @click="handleUserInfoClick">
        {{ userInfo.username }}
      </div>
      <div class="login-button" v-else @click="handleLoginClick">登录</div>
    </header>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  import { useUserStore } from '@/stores/useUserStore';
  import { useRouter } from 'vue-router';
  
  const userStore = useUserStore();
  const router = useRouter();
  
  const isLoggedIn = computed(() => userStore.isLoggedIn);
  const userInfo = computed(() => userStore.userInfo);
  
  const handleSearch = (e) => {
    console.log('Search:', e.target.value);
  };
  
  const handleUserInfoClick = () => {
    router.push(`/user/${userInfo.value.id}`);
  };
  
  const handleLoginClick = () => {
    router.push('/login');
  };
  </script>
  
  <style scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .logo {
    font-size: 20px;
    font-weight: bold;
  }
  input {
    width: 300px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .user-info {
    font-size: 16px;
    cursor: pointer;
  }
  .login-button {
    font-size: 16px;
    cursor: pointer;
    color: #ff2266;
  }
  </style>